<script setup>
import { getmbxServive,getSubCategoryService } from '@/api/category'
import { useRoute } from 'vue-router';
import { onMounted,ref } from 'vue'
import GoodsItem from '../Home/components/GoodsItem.vue';
const route = useRoute()
defineOptions({
    name:'indexItem'
})
// 获取面包屑导航数据
const filter = ref({})
const getMax = async() => {
   const res = await getmbxServive(route.params.id)
   filter.value = res.data.result
}
onMounted(()=>{getMax()})

// 获取分类列表数据
const data = ref({
    categoryId: route.params.id,
    page:1,
    pageSize: 20,
    sortField: 'publishTime'
})
const goodsList = ref([])
const getSubCategory = async() => {
   const res = await getSubCategoryService(data.value)
   goodsList.value = res.data.result.items
}
onMounted(()=>{getSubCategory()})

const handleClick = () => {
    data.value.page = 1
    getSubCategory()
}

// 下拉触底，数据加载事件
const disabled = ref(false)
const load = async() => {
    // 1、拿到请求数据的接口
    const res = await getSubCategoryService(data.value)
    // 2、滚动到底部之后让页码 + 1
    data.value.page ++
    // 3、展开运算符，让新老数据进行拼接
    goodsList.value =  [...goodsList.value,...res.data.result.items]
    // 4、加载完毕之后停止加载
    if(res.data.result.items.length === 0) {
        disabled.value = true
    }
}
</script>
<template>
    <div class="bread mbx" style="margin: 10px auto;">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: `/category/${ filter.parentId }` }">{{ filter.parentName }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ filter.name }}</el-breadcrumb-item>
        </el-breadcrumb>
  </div>

  <div class="title bread">
      <el-tabs v-model="data.sortField" class="demo-tabs" @tab-click="handleClick" style="width: 100%;">
            <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
            <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
            <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
    </el-tabs>
  </div>
 <div class="category bread"> 
    <ul v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
        <li v-for="item in goodsList" :key="item.id" > <GoodsItem :item="item"></GoodsItem> </li>
    </ul>
 </div>
</template>
<style scoped>

   .title{
    background-color: #fff;
    display: flex;
    padding: 10px 0;
   }
   .title h2{
    font-weight: 400;
    margin: 0 20px;
   }
   .bread{
    width: 1200px;
    margin: 0 auto;
   }
   ul{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
   }
   ul li{
    border: 1px solid #eee;
    text-align: center;
    margin-bottom: 20px;
    width: 220px;
    height: 280px;
   }
</style>